﻿<template>
  <a-drawer
    title="编辑项目信息"
    placement="right"
    :closable="true"
    :maskClosable="true"
    @close="onDrawerClose"
    :visible="visible"
    width="80%"
    :keyboard="true"
    :getContainer="false">
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout" layout="inline">
        <a-collapse v-model="activeKey" @change="changeActivekey" accordion>
          <a-collapse-panel key="main" header="项目主要信息">
            <a-card-grid style="margin-bottom: 18px;height: 448px;width: 33.3%; text-align: left">
              <a-form-model-item
                label="排序"
                prop="Sort"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.Sort" autocomplete="off" placeholder="越小越靠前" />
              </a-form-model-item>
              <a-form-model-item
                label="自定义编码"
                prop="Code"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.Code" autocomplete="off" placeholder="自定义编码" />
              </a-form-model-item>
              <a-form-model-item
                label="批准状态"
                prop="ApprovalStatus"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-select default-value="0" v-model="entity.ApprovalStatus">
                  <a-select-option :key="0" :value="0">
                    <span style="color: red; font-weight: bold">未通过</span>
                  </a-select-option>
                  <a-select-option :key="1" :value="1">
                    <span style="color: green; font-weight: bold">已通过</span>
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item
                label="项目名称"
                prop="ProjectName"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.ProjectName" autocomplete="off" placeholder="项目名称" />
              </a-form-model-item>
              <a-form-model-item
                label="城市"
                prop="City"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.City" autocomplete="off" placeholder="城市" />
              </a-form-model-item>
              <a-form-model-item
                label="项目类型"
                prop="ProjectType"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.ProjectType" autocomplete="off" placeholder="项目类型" />
              </a-form-model-item>
              <a-form-model-item
                label="总建筑面积"
                prop="TotalArea"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.TotalArea" autocomplete="off" placeholder="总建筑面积" />
              </a-form-model-item>
              <a-form-model-item
                label="标准层建筑面积"
                prop="StandardArea"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.StandardArea" autocomplete="off" placeholder="标准层建筑面积" />
              </a-form-model-item>
              <a-form-model-item
                label="建筑总高度"
                prop="TotalHeight"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.TotalHeight" autocomplete="off" placeholder="建筑总高度" />
              </a-form-model-item>
              <a-form-model-item
                label="标准层层高"
                prop="StandardHeight"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.StandardHeight" autocomplete="off" placeholder="标准层层高" />
              </a-form-model-item>
            </a-card-grid>
            <a-card-grid style="margin-bottom: 18px;height: 448px;width: 33.3%; text-align: left">
              <a-form-model-item
                label="地上高区层数"
                prop="OnGround_H"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.OnGround_H" autocomplete="off" placeholder="地上高区层数" />
              </a-form-model-item>
              <a-form-model-item
                label="地上中区层数"
                prop="OnGround_M"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.OnGround_M" autocomplete="off" placeholder="地上中区层数" />
              </a-form-model-item>
              <a-form-model-item
                label="地上低区层数"
                prop="OnGround_L"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.OnGround_L" autocomplete="off" placeholder="地上低区层数" />
              </a-form-model-item>
              <a-form-model-item
                label="地上不分区层数"
                prop="onGround_No"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.onGround_No" autocomplete="off" placeholder="地上不分区层数" />
              </a-form-model-item>
              <a-form-model-item
                label="地上层数"
                prop="OnGround_All"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.OnGround_All" autocomplete="off" placeholder="地上层数" />
              </a-form-model-item>
              <a-form-model-item
                label="地下层数"
                prop="UnderGround_All"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.UnderGround_All" autocomplete="off" placeholder="地下层数" />
              </a-form-model-item>
              <a-form-model-item
                label="避难层高区层高"
                prop="Refuge_H"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.Refuge_H" autocomplete="off" placeholder="避难层高区层高" />
              </a-form-model-item>
              <a-form-model-item
                label="避难层中区层高"
                prop="Refuge_M"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.Refuge_M" autocomplete="off" placeholder="避难层中区层高" />
              </a-form-model-item>
              <a-form-model-item
                label="避难层低区层高"
                prop="Refuge_L"
                :labelCol="{ style: 'width: 120px;float:left;' }"
                :wrapperCol="{ style: 'width: 200px;float:left;' }">
                <a-input v-model="entity.Refuge_L" autocomplete="off" placeholder="避难层低区层高" />
              </a-form-model-item>
            </a-card-grid>
            <a-card-grid style="margin-bottom: 18px;height:448px;width: 33.4%; text-align: left">
              <a-form-model-item
                label="项目图片"
                prop="Project_Photo_Url"
                :labelCol="{ style: 'width: 60px;float:left;' }"
                :wrapperCol="{ style: 'width: 400px;float:left;' }">
                <!--<a-input v-model="entity.Project_Photo_Url" autocomplete="off" placeholder="项目图片（或照片、效果图）" />-->
                <a-input
                  readOnly
                  v-model="entity.Project_Photo_Url"
                  autocomplete="off"
                  aria-readonly="true"
                  placeholder="项目图片（或照片、效果图）" />
                <a-button type="primary" icon="plus" @click="UploadFileProject_Photo_Url()">上传文件</a-button>
              </a-form-model-item>
              <a-form-model-item
                label="电梯分布图"
                prop="DwData_Url"
                :labelCol="{ style: 'width: 80px;float:left;' }"
                :wrapperCol="{ style: 'width: 400px;float:left;' }">
                <!--<a-input v-model="entity.DwData_Url" autocomplete="off" placeholder="电梯分布图地址集合" />-->
                <a-input
                  readOnly
                  v-model="entity.DwData_Url"
                  autocomplete="off"
                  aria-readonly="true"
                  placeholder="电梯分布图地址" />
                <a-button type="primary" icon="plus" @click="UploadFileDwData_Url()">上传文件</a-button>
              </a-form-model-item>
            </a-card-grid>
          </a-collapse-panel>
          <a-collapse-panel ken="format" header="项目业态及电梯信息">
            <a-row :gutter="10">
              <a-col span="12">
                <a-card title="业态信息" :bordered="false">
                  <div class="table-operator">
                    <a-button
                      v-if="hasPerm('Base_ProjectInfo.Add')"
                      type="primary"
                      icon="plus"
                      @click="handleAddFormat()">新建
                    </a-button>
                    <a-button type="primary" icon="redo" @click="getDataListFormat()">刷新</a-button>
                  </div>
                  <a-table
                    ref="tableFormat"
                    :columns="columnsFormat"
                    :rowKey="row => row.FormatId"
                    :dataSource="dataFormat"
                    :pagination="pagination"
                    :loading="loading"
                    :rowSelection="{ selectedRowKeys: selectedRowKeysFormat, onChange: onSelectChangeFormat }"
                    :bordered="true"
                    :customRow="customRowFormat"
                    size="small">
                    <span slot="action" slot-scope="text, record">
                      <template>
                        <a v-if="hasPerm('Base_ProjectInfo.Edit')" @click="handleEditFormat(record.Id)">编辑</a>
                        <a-divider
                          v-if="hasPerm('Base_ProjectInfo.Edit')&&hasPerm('Base_ProjectInfo.Delete')"
                          type="vertical" />
                        <a v-if="hasPerm('Base_ProjectInfo.Delete')" @click="handleDeleteFormat([record.Id])">删除</a>
                      </template>
                    </span>
                  </a-table>
                </a-card>
              </a-col>
              <a-col span="12">
                <a-card title="电梯分组" :bordered="false">
                  <div class="table-operator">
                    <a-button
                      v-if="hasPerm('Base_ProjectInfo.Add')"
                      type="primary"
                      icon="plus"
                      @click="handleAddElevatorGroup()">新建
                    </a-button>
                    <a-button type="primary" icon="redo" @click="getDataListElevatorGroup()">刷新</a-button>
                  </div>
                  <a-table
                    ref="tableElevator"
                    :columns="columnsElevator"
                    :rowKey="row => row.FormatId"
                    :dataSource="dataElevator"
                    :pagination="pagination"
                    :loading="loading"
                    :rowSelection="{ selectedRowKeys: selectedRowKeysFormat, onChange: onSelectChangeFormat }"
                    :bordered="true"
                    :customRow="customRowFormat"
                    size="small">
                    <span slot="action" slot-scope="text, record">
                      <template>
                        <a v-if="hasPerm('Base_ProjectInfo.Edit')" @click="handleEditFormat(record.Id)">编辑</a>
                        <a-divider
                          v-if="hasPerm('Base_ProjectInfo.Edit')&&hasPerm('Base_ProjectInfo.Delete')"
                          type="vertical" />
                        <a v-if="hasPerm('Base_ProjectInfo.Delete')" @click="handleDeleteFormat([record.Id])">删除</a>
                      </template>
                    </span>
                  </a-table>
                </a-card>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
        <p style="height: 50px"></p>
      </a-form-model>
    </a-spin>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'center',
        zIndex: 1,
      }"
    >
      <a-button style="margin-right: 100px" @click="onDrawerClose">取消</a-button>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>
    <upload-file-form
      ref="uploadFileForm"
      :parentObj="this"
      leading="/Base_Project/Base_ProjectInfo/UploadFileByForm"
    ></upload-file-form>
  </a-drawer>
</template>

<script>
import UploadFileForm from '@/components/FileOperations/UploadFileForm'

const columnsFormat = [
  // { title: '业态编号', dataIndex: 'Id' },
  { title: '业态名称', dataIndex: 'FormatName' },
  { title: '业态属性', dataIndex: 'FormatProps' },
  { title: '垂直电梯总数量', dataIndex: 'Format_E_Count' },
  { title: '操作', dataIndex: 'action', width: '25%', scopedSlots: { customRender: 'action' } }
]
const columnsElevator = [
  { title: '电梯类别', dataIndex: 'E_TypeName' },
  { title: '电梯数量', dataIndex: 'E_Count' },
  { title: '操作', dataIndex: 'action', width: '25%', scopedSlots: { customRender: 'action' } }
]
export default {
  props: {
    parentObj: Object
  },
  components: {
    UploadFileForm
  },
  data () {
    return {
      dataFormat: [],
      dataElevator: [],
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      loading: false,
      entity: {},
      fileColumn: '',
      uploadFileURL: '',
      rules: {
        ProjectName: [{ required: true, message: '请输入项目信息', trigger: 'blur' }],
        City: [{ required: true, message: '请选择城市信息', trigger: 'blur' }],
        ProjectType: [{ required: true, message: '请选择项目类型', trigger: 'blur' }]
        // Nums: [{ required: true, message: '请输入', trigger: 'change' }]
      },
      title: '',
      activeKey: ['main'],
      columnsFormat,
      columnsElevator,
      selectedRowKeysFormat: [],
      selectedRowKeysElevator: []
    }
  },
  methods: {
    init () {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.activeKey = 'main'
    },
    openDrawer (id) {
      this.init()
      if (id) {
        this.loading = true
        this.$http.post('/Base_Project/Base_ProjectInfo/GetTheDataOfMongoDB', { id: id }).then(resJson => {
          this.entity = resJson.Data
          console.log(this.entity)
          this.getDataListFormat()
          this.loading = false
        })
      }
    },
    onDrawerClose () {
      this.visible = false
    },
    UploadFileProject_Photo_Url () {
      this.uploadFileURL = ''
      this.fileColumn = 'Project_Photo_Url'
      this.$refs.uploadFileForm.openForm('文件上传 -->>请选择上传的项目图片')
    },
    UploadFileDwData_Url () {
      this.uploadFileURL = ''
      this.fileColumn = 'DwData_Url'
      this.$refs.uploadFileForm.openForm('文件上传 -->>请选择上传的电梯分布图')
    },
    UpdateSaveFileUrl () {
      this.loading = true
      if (this.fileColumn === 'Project_Photo_Url') {
        this.entity.Project_Photo_Url = this.uploadFileURL
      }
      if (this.fileColumn === 'DwData_Url') {
        this.entity.DwData_Url = this.uploadFileURL
      }
      if (this.entity.Id) {
        this.queryParam = [
          {
            Condition: 'ReportUrl',
            Keyword: this.entity.ReportUrl
          },
          {
            Condition: 'Status',
            Keyword: '2'
          }]
        console.log(this.queryParam)
        this.$http
          .post('/Base_VIPUser/Base_VIPUserOrder/UpdateDataByConditions', {
            Id: this.entity.Id,
            Search: this.queryParam,
            ...this.filters
          })
          .then(resJson => {
            if (resJson.Success) {
              this.$message.success('报告文件地址保存成功!')
              this.visible = false
              this.parentObj.getDataList()
            } else {
              this.$message.error(resJson.Msg)
            }
          })
      }
      this.loading = false
    },
    handleSubmit () {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/Base_Project/Base_ProjectInfo/SaveData', this.entity).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    onSelectChangeFormat (selectedRowKeys) {
      this.selectedRowKeysFormat = selectedRowKeys
    },
    onSelectChangeElevator (selectedRowKeys) {
      this.selectedRowKeysElevator = selectedRowKeys
    },
    getDataListFormat () {
      console.log(this.entity.ProFormats)
      this.dataFormat = this.entity.ProFormats
    },
    getDataListElevator () {
    },
    handleAddFormat () {
    },
    handleAddElevator () {
    },
    handleEditFormat () {
    },
    handleEditElevator () {
    },
    handleDeleteFormat () {
    },
    handleDeleteElevator () {
    },
    // methods中定义方法
    customRowFormat (record, index) {
      return {
        // 这个style就是我自定义的属性，也就是官方文档中的props
        style: {
          // 字体颜色
          color: record.remarkDesc ? record.remarkDesc.fontColor : 'rgba(0, 0, 0, 0.65)',
          // 行背景色
          'background-color': record.remarkDesc ? record.remarkDesc.bgColor : '#ffffff',
          // 字体类型
          'font-family': record.remarkDesc ? record.remarkDesc.fontType : 'Microsoft YaHei',
          // 下划线
          'text-decoration':
            record.remarkDesc && record.remarkDesc.underline ? 'underline' : 'unset',
          // 字体样式-斜体
          'font-style': record.remarkDesc && record.remarkDesc.italics ? 'italic' : 'unset',
          // 字体样式-斜体
          'font-weight': record.remarkDesc && record.remarkDesc.bold ? 'bolder' : 'unset'
        },
        on: {
          // 鼠标单击行
          click: event => {
            // do something
          }
        }
      }
    }
  }
}
</script>
